<template>
    <h-section title="基本信息" collapse>
        <div class="section-body">
            <a-form layout="inline" :model="form">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="版本号" name="versionNumber">
                            <div style="width: 100%">
                                <span>
                                    {{ form.versionNumber }}
                                </span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="版本名称" name="versionName">
                            <div style="width: 100%">
                                <span>
                                    {{ form.versionName }}
                                </span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="预计交付时间">
                            <div style="width: 100%">
                                <span>{{ $filters.dateFilter(form.expectTime) }}</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24">
                        <a-form-item label="系统类型" name="requestSystem">
                            <div style="width: 100%">
                                <span>
                                    {{ $filters.valToNameFilter('systemType', form.systemType) }}
                                </span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="流程状态">
                            <div style="width: 100%">
                                <span>{{ $filters.valToNameFilter('processStatus', form.processStatus) }}</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="流程类型" name="processType">
                            <div style="width: 100%">
                                <span>
                                    {{ $filters.valToNameFilter('processType', form.processType) }}
                                </span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="开始时间">
                            <div style="width: 100%">
                                <span>{{ $filters.dateFilter(form.startTime) }}</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="发布时间">
                            <div style="width: 100%">
                                <span>{{ $filters.dateFilter(form.onlineTime) }}</span>
                            </div>
                        </a-form-item>
                    </a-col> -->
                    <a-col :span="24">
                        <a-form-item label="负责人">
                            <div style="width: 100%">
                                <span>{{ detail.createUser }}</span>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </h-section>
</template>

<script lang="ts">
import api from '@/api';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'BaseInfo',
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    emits: ['detailChange', 'save'],
    setup(props, { emit }) {
        const state = reactive<Recordable>({
            form: {
                versionName: '',
                versionNumber: '',
                expectTime: '',
                startTime: '',
                onlineTime: '',
                processStatus: '',
                processType: '',
                status: '',
                system: null,
                systemType: ''
            },
            relateInfo: {}
        });
        watch(
            () => state.form.processType,
            (n: string) => {
                emit('detailChange', {
                    processType: n
                });
            }
        );
        const init = () => {
            Object.keys(state.form).forEach((key) => {
                state.form[key] = props.detail[key];
            });
        };
        init();
        return {
            ...toRefs(state)
        };
    }
});
</script>
<style lang="less">
.section-body {
    &-title {
        font-size: 24px;
        color: @title-font-color;
        font-weight: bold;
    }
    .btn-group {
        margin: 0 12px 8px 0;
        button + button {
            margin-left: 8px;
        }
    }
}
</style>

